<template>
    <div class="w-100 h-100" style="background: rgb(247 248 250)">
        <div class="h-20 w-100 mb-20 fs-12 overflow-hidden" style="background: rgb(244, 247, 255); border: 1px solid rgb(177, 209, 255); border-radius: 4.5px">
            <div class="w-100 mt-16 pl-16" style="font-weight: bold">毕业生完成签约或去向登记，经学校审核后，学生可以在线办理档案转递信息添加</div>
            <div class="w-100 pl-16" style="color: rgb(93, 95, 96)">1、若单位接收档案，则按单位要求填写档案接收单位，档案转递信息要填写详细完整；</div>
            <div class="w-100 pl-16" style="color: rgb(93, 95, 96)">2、若单位不接收档案，则档案可以回生源地档案管理机构，其他情况可联系学校老师处理；</div>
            <div class="w-100 pl-16" style="color: rgb(93, 95, 96)">3、境内全日制升学的学生由升学学校接收档案，档案信息转往升学学校或学院，请填写完整；</div>
            <div class="w-100 pl-16" style="color: rgb(93, 95, 96)">4、境内非全日制升学的学生档案回生源地，档案信息填写完整，如有不明请咨询学校老师；</div>
            <div class="w-100 pl-16" style="color: rgb(93, 95, 96)">5、出国出境就业、升学的学生档案回生源地，档案信息填写完整，如有不明请咨询学校老师。</div>
            <div class="w-100 mb-16 pl-16" style="color: rgb(93, 95, 96)">注：其他情况档案回生源地或办理托管</div>
        </div>
        <div class="h-45 w-100 mb-20 overflow-hidden" style="background: rgb(255, 255, 255); border: 1px solid rgb(235, 239, 246); border-radius: 4.5px">
            <div class="w-100 h-10 fs-12 d-flex" style="font-weight: bold; border-bottom: 1px solid rgb(235, 239, 246)">
                <div class="w-50 pl-16 mt-8 pb-8">档案信息</div>
                <div class="w-50 pl-16 mt-8 pb-8 m-auto">
                    <Button size="small" class="float-right mr-16 mt-8" type="primary">档案信息登记</Button>
                </div>
            </div>
            <div class="w-90 h-90 m-auto">
                <Table v-if="resume_data1.length > 0" class="mt-8" disabled-hover :columns="resume_listing" :data="resume_data"></Table>
                <div v-else class="text-center mt-28">
                    <img src="https://img02.mockplus.cn/image/2022-04-20/5978d050-d7e3-11eb-9f2e-47c06f72d77a.png" />
                    <br />
                    <span>暂无数据</span>
                </div>
            </div>
        </div>
        <div class="h-30 w-100" style="background: rgb(255, 255, 255); border: 1px solid rgb(235, 239, 246); border-radius: 4.5px">
            <Menu mode="horizontal" :theme="theme1" active-name="1">
                <MenuItem name="1">审核记录</MenuItem>
                <MenuItem name="2">变更记录</MenuItem>
            </Menu>
            <div class="w-90 h-90 m-auto">
                <Table v-if="resume_data1.length > 0" class="mt-8" disabled-hover :columns="resume_listing" :data="resume_data"></Table>
                <div v-else class="text-center mt-28">
                    <img src="https://img02.mockplus.cn/image/2022-04-20/5978d050-d7e3-11eb-9f2e-47c06f72d77a.png" />
                    <br />
                    <span>暂无数据</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            resume_listing: [
                {
                    title: '学校',
                    key: 'school_name',
                    minWidth: 145,
                    align: 'center'
                },
                {
                    title: '姓名',
                    key: 'student_name',
                    minWidth: 90,
                    align: 'center'
                },
                {
                    title: '学号',
                    key: 'student_is',
                    minWidth: 145,
                    align: 'center'
                },
                {
                    title: '考生号',
                    key: 'candidate_number',
                    minWidth: 190,
                    align: 'center'
                },
                {
                    title: '当前审批环节',
                    key: 'approval_process_type',
                    minWidth: 123,
                    align: 'center',
                    render: (h, param) => {
                        if (param.row.approval_process === 1) {
                            return h('span', '学校审核');
                        } else {
                            return h('span', '');
                        }
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth: 80,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'span',
                                {
                                    style: {
                                        color: 'rgb(22, 119, 255)',
                                        marginRight: '10px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params);
                                        }
                                    }
                                },
                                '撤回'
                            ),
                            h(
                                'span',
                                {
                                    style: {
                                        color: 'rgb(22, 119, 255)'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params);
                                        }
                                    }
                                },
                                '查看'
                            )
                        ]);
                    }
                }
            ],
            resume_data: [
                {
                    school_name: '郑州大学',
                    student_name: '张三',
                    student_is: '123123123123123',
                    candidate_number: '3123123123123123',
                    approval_process: 1
                }
            ],
            resume_data1: []
        };
    },
    methods: {
        show(param) {
            console.log(param);
        }
    }
};
</script>
